<template>
  <el-row
    :gutter="totalList.length == 4 ? 40 : 24"
    class="mrb18 flex nowrap scrollbar-white-slinder1"
  >
    <el-col
      v-for="(item, index) in totalList"
      :key="index"
      style="marin-right:15px"
      ><div
        class="grid-content bg-purple  bradios white-bg color-info shadow-info relative"
        @click.stop="goUrl(item)"
        :class="item.routerName ? 'pointer' : ''"
      >
        <!--  :class="item.bgClass" -->
        <div
          class="flex align-center color-white  top-bg pd15 justify-between "
        >
          <div class="flex align-center">
            <i
              :class="item.icon"
              class="color-white  size36 bold"
              style="opacity:1"
            ></i>
            <div class="size16 pdl5 ">{{ item.title }}</div>
          </div>
          <span
            v-if="item.isErxian"
            class="absolute size16"
            style="right:8px;top:6px"
            >+<b>{{ item.isErxian }}</b></span
          >
          <div class="pdl30 ">
            <div class="family-cg size24 nowrap bold">
              {{ item.num }}<span class="size16">{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="flex align-center  justify-between text-center pd15">
          <div
            v-for="(children, index) in item.childList"
            :key="index"
            @click.stop="goUrl(item, children.status)"
          >
            <div class="family-cg size20 " style="" :class="children.color">
              {{ children.total
              }}<span class="size16">{{ children.unit }}</span>
            </div>
            <div class="size14 color-drak nowrap">{{ children.name }}</div>
          </div>
        </div>
      </div></el-col
    >
  </el-row>
</template>
<script>
export default {
  props: {
    totalList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    searchData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    goUrl(item, status) {
      //   console.log("item---");
      //   console.log(item);
      if (!item.routerName) {
        return;
      }

      this.$router.push({
        name: item.routerName,
        query: {
          ...this.searchData,
          ...status
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bradios {
  border-radius: 6px;
  overflow: hidden;
}
.top-bg {
  //   background: linear-gradient(90deg, #244f9e 0%, #2f8ad1 100%);
  //   background-image: url("/fabu-admin/uiImgs/top_bg.png");
  background: url("/fabu-admin/uiImgs/top_bg.png") no-repeat center center,
    linear-gradient(90deg, #244f9e 0%, #2f8ad1 100%);
  background-size: 100% 100%;
}
</style>
